<template>
  <div style="height: 800px; overflow: hidden;">
    <IFrame :src="url" />
  </div>
</template>

<script setup>
import { CACHE_KEY, useCache } from '@/hooks/web/useCache';
import * as MenuApi from '@/api/system/menu/index';
import { getTenantId } from '@/utils/auth'

defineOptions({ name: 'CommonIframe' })

const url = ref('')
const route = useRoute()
const { wsCache } = useCache()
const menuId = ref('')

const getMenuInfo = async () => {
  try {
    const { pathArgument } = await MenuApi.getMenu(menuId.value)
    const pathArr = pathArgument.split(',')
    const obj = {}
    pathArr.forEach(item => {
      const itemArr = item.split('=')
      obj[itemArr[0]] = itemArr[1]
    })
    const responseType = 'code';
    const tenantId = getTenantId();
    const redirectUri = encodeURIComponent(`https://${obj['toUrl']}/api/noauth/oauth2/login/code?tenantCode=${tenantId}&prevUri=` + encodeURIComponent(`https://${obj['toUrl']}/dashboard/${obj['dashboard']}`) + '&redirectDomain='+ encodeURIComponent(`https://${obj['toUrl']}`));
    url.value = `https://ftcdz.gridvo.com/sso?client_id=` + obj['clientId']
    + '&response_type=' + responseType
    + '&redirect_uri=' + redirectUri + '&scope=user.read';
    console.log(`output->url.value`,url.value)
  } catch (error) {
    console.log(`output->error`,error)
  }
}

onMounted(() => {
  try {
    const menu = wsCache.get(CACHE_KEY.ROLE_ROUTERS)
    const findMenu = menu?.find(item => item.name === route.matched[0].meta.title)
    const findItem = findMenu.children?.find(k => k.name === route.matched[1].meta.title)
    menuId.value = findItem?.id ?? ''
    getMenuInfo()
    
  } catch (error) {
    console.log(`output->error`,error)
  }
})


</script>

<style lang="scss" scoped>

</style>